<template>
    <div id="parts">
        <el-table :data="dataList.slice((currentPage-1)*pagesize,currentPage*pagesize)" stripe border class="table-index" :height="tableHeight" style="width: 100%;" :header-cell-style="getRowClass">
            <el-table-column fixed type="index" label="*" sortable min-width="40"></el-table-column>
            <el-table-column prop="nameName" label="物料名称" sortable min-width="160"></el-table-column>
            <el-table-column prop="code" label="物料条码" sortable min-width="160"></el-table-column>
            <el-table-column prop="batchnums" label="物料批号" sortable min-width="160"></el-table-column>
            <el-table-column prop="typenums" label="物料型号" sortable min-width="160"></el-table-column>
            <el-table-column prop="usenums" label="数量" sortable min-width="90"></el-table-column>
            <el-table-column prop="unit" label="计量单位" sortable min-width="100"></el-table-column>
            <el-table-column prop="outstoragetime" label="不合格品发现时间" sortable min-width="170"></el-table-column>
            <el-table-column prop="usepersonName" label="发现人" sortable min-width="100"></el-table-column>
            <el-table-column prop="isrepair" label="是否返厂" :formatter="formatIsYes" sortable min-width="110"></el-table-column>
            <el-table-column fixed="right" label="操作" sortable align="center" width="75">
                <template slot-scope="scope">
                    <el-button @click="updateList(scope.row)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="dataList.length"></el-pagination>

        <!-- 详情信息 -->
        <el-dialog title="编辑" width="900px" center :visible.sync="isDialog" :close-on-click-modal="false" style="padding-bottom: 15px;">
            <el-form :inline="true" class="demo-form-inline" v-model="dialogList" label-position="right" label-width="180px">
                <el-form-item label="物料名称"><el-input v-model="dialogList.nameName" disabled></el-input></el-form-item>
                <el-form-item label="物料条码"><el-input v-model="dialogList.code" disabled></el-input></el-form-item>
                <el-form-item label="物料批号"><el-input v-model="dialogList.batchnums" disabled></el-input></el-form-item>
                <el-form-item label="物料型号"><el-input v-model="dialogList.typenums" disabled></el-input></el-form-item>
                <el-form-item label="计量单位"><el-input v-model="dialogList.unit" disabled></el-input></el-form-item>
                <el-form-item label="使用数量"><el-input v-model="dialogList.usenums" disabled></el-input></el-form-item>
                <el-form-item label="发现人"><el-input v-model="dialogList.usepersonName" disabled></el-input></el-form-item>
                <el-form-item label="是否返场">
                    <el-select v-model="dialogList.isrepair">
                        <el-option label="否" :value="0"></el-option>
                        <el-option label="是" :value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: right;">
                <el-button @click="submitList" type="primary">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
    export default {
        name: "",
        data() {
            let token = sessionStorage.getItem("tokenId");
            let menuId = sessionStorage.getItem('menuId');
            return {
                tokenId: token,
                menuId:menuId,
                currentPage: 1,
                pagesize: 10,
                tableHeight: document.documentElement.clientHeight - 130,
                dataList: [],

                //基本信息
                isDialog: false,
                dialogList:{
                    batchnums: "",
                    code: "",
                    id: '',
                    isrepair: '',
                    materialstate: "",
                    mcode: "",
                    mid: "",
                    name: "",
                    nameName: "",
                    outstorageaddtime: '',
                    outstoragetime: '',
                    pcode: '',
                    pid: '',
                    tid: '',
                    typenums: '',
                    unit: '',
                    usenums: '',
                    useperson: '',
                    usepersonName: '',
                },

            };
        },
        created() {
            this.getData();
        },
        methods: {
            getData() {
                let _this = this;
                let loading = this.$loading({
                    target: document.querySelector(".wrapper > .content-box"),
                    lock: true,
                    text: '正在努力加载中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.8)'
                });
                this.$http({
                    url: '/api/adscm/operation/jqylMaterialdetail/selectUnqualifiedMaterial?tokenId=' + _this.tokenId,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.dataList = res.data.content;
                        loading.close();
                    } else {
                        _this.$message.error(res.data.desc);
                        loading.close();
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                    loading.close();
                })
            },
            updateList(row) {
                this.isDialog = true;
                this.dialogList = row;
                this.dialogList.isrepair = parseInt(this.dialogList.isrepair);
            },
            submitList(){
                let _this = this;
                this.$http({
                    url: '/api/adscm/operation/jqylMaterialdetail/update?tokenId='+_this.tokenId,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                    data:_this.dialogList,
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.isDialog = false;
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                })
            },

            formatIsYes(c,r,value,index){
                return value === 0 ? '否' : (value === 1 ? '是' : "");
            },
            handleSizeChange: function (size) {
                this.pagesize = size;
            },
            handleCurrentChange: function (currentPage) {
                this.currentPage = currentPage;
            },
        }
    }
</script>

<style scoped>

    #parts .el-table--small {
        font-size: 13px;
    }

    #parts .el-table .cell,
    #parts .el-table th div {
        padding-left: 0;
        padding-right: 0;
    }

    #parts .el-tab-pane.dialog1 .el-form{
        margin-bottom: 30px;
    }

</style>
